Axios Ajax 请求工具

Axios 是什么？

Axios是一个可以在浏览器和NodeJS的异步通信框架它的主要作用就是实现ajax异步通信

从浏览器中创建 XMLHttpRequests
从node.js 创建http请求
支持链式编程
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御 XSRF（跨站请求伪造）

配置环境

先导入这个包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如果是使用的npm则

npm install axios

get请求

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    // data 属性名称是固定的，用于取到响应的参数
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

可以直接把错误的回调写在 then 上面

/*

then的第一个回调函数会在请求成功时触发
      第二个回调函数会在请求失败时触发
*/
axios.get(地址?查询字符串).then(function(response){},function(err){})

get请求参数

get传递参数可以通过两种方式

方式1：

axios.get('/user?key1=value&key2=value')

方式2：

axios.get('/user', { 
  params: {
      key: value
    }
  })

post请求

语法与上基本相同，但是参数不能直接?key1=value&key2=value的形式

axios.post('/user', {key:value,key2:value2}).then(function(response){},function(err){})

post请求参数

Post 请求的参数就不需要使用 params 属性了，直接传给对象就好了，然后请求体里默认传递的数据是 JSON 格式的

方式一：使用 JSON 的方式

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

方式二：表单形式的

通过 URLSearchParams 传递参数（application/x-www-form-urlencoded）

然后这种参数就是和上面 get 请求的参数是一样的 key1=value&key2=value 的形式

注：所以在 Postman 里这样传递数据需要使用 x-www-form-urlencoded，JSON 是通过 form-data

const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/api/test',params).then(res=>{
  console.log(res.data);
})

Axios的响应结果

响应的主要属性

data：实际响应回来的数据
headers：响应头信息
status：响应状态码
statusText：响应状态信息

Axios的全局配置

axios.defaults.timeout = 3000;  // 设置超时时间


// 设置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';  
// 然后请求时就可以省略掉前面的请求地址（会自动拼接上前面那部分）
axios.get('user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    // data 属性名称是固定的，用于取到响应的参数
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });



axios.defaults.headers['请求头属性'] = '参数';  // 设置请求头
// 例如携带 token 验证登陆，然后每次发送的请求头里都有这个 mytoken 参数
axios.defaults.headers['mytoken'] = '参数';  
// 所以在 Express 跨域里就有这一项
// 下面 "Access-Control-Allow-Headers" 就是允许 "X-Requested-With"、'Content-Type'、'mytoken' 这三种的请求头
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});

Axios 接收图片

参考资料你知道前端对图片的处理方式吗？注意 axios 会把响应类型默认设置为 json 所以需要手动改成二进制

Axios拦截器

请求拦截器和响应拦截器

axios.post(
'/path',
params,
// 将responseType的默认json改为blob
{
responseType: 'blob',
emulateJSON: true
}).then(res => {
  if (res.data) {
    return Promise.resolve(res.data)
  } else {
    throw res
  }
}).catch(err => {
  return Promise.reject(err)
})

//现在可以传进 img 表情的 src 属性了
img.src = window.URL.createObjectURL(blob)

请求拦截器

在请求发出之前设置一些信息

axios.interceptors.request.use((config)=>{
  // 在请求发出前对某些请求进行一些信息设置
  if(config.url == 'xxx'){
    ...
  }


  // 也可以在这里直接设置请求头
  config.headers.mytoken = '参数';
  return config;
},(err)=>{
  // 处理响应的错误信息
})

响应拦截器

在请求发出之前设置一些信息

axios.interceptors.response.use((res)=>{
  // 在这里对返回的数据进行处理
  return res;
},(err)=>{
  // 处理响应的错误信息
})

拦截器添加 Token

使用 Token 来记录状态需要在每个请求头加上 Token 来验证身份信息（保证获取数据的权限）

// axios 请求拦截
axios.interceptors.request.use( config => {
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

Axios的并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

Axios的使用案例

参考自--黑马-网络应用

原生的写法

/*
  接口1：随机笑话
  请求地址： https://autumnfish.cn/api/joke/list
  请求方式：get
  请求参数：num(笑话条数,数字)
  响应内容：随机笑话

  接口2：用户注册
  请求地址： https://autumnfish.cn/api/user/reg
  请求方式：post
  请求参数：username(用户名,字符串)
  响应内容：注册成功或失败
*/

// document.querySelector(".get") 是原生的选择器，用来选中第一个button
document.querySelector(".get").onclick = function(){
  axios.get("https://autumnfish.cn/api/joke/list?num=3")
  .then(function(response){
    console.log(response)
  },function(err){
    console.log(err)
  })
}


document.querySelector(".post").onclick = function(){
  axios.post("https://autumnfish.cn/api/user/reg",{
    username: "alsritter"
  })
  .then(function(response){
    console.log(response)
  },function(err){
    console.log(err)
  })
}

Axios结合vue使用

<div id="app">
  {{joke}}
  <button @click="getJoke">生成笑话</button>
</div>

注意！！this是动态的，在Axios里执行this和在外面执行的this是不同的 所以需要在里面操作 vue 的 data 数据需要先在外面创建一个临时变量用来存储this这个指针指向的对象然后再在 axios 里使用保存的 this

let app = new Vue({
  el: '#app',
  data: {
    joke: '笑话'
  },
  methods: {
    getJoke: function () {
      // 因为前面提过this是动态的，所以需要在axios前把this这个指针指向的对象存起来
      let that = this;
      axios.get("https://autumnfish.cn/api/joke/list?num=3")
        .then(function (response) {
          that.joke = response.data
        }, function (err) {
          console.log(err)
        })
    }
  }
})

绑定 VueCli

Vue.prototype.$http = axios;

axios.defaults.baseURL = 'http://47.103.192.147:7758/'

Axios 是什么？​

配置环境​

get请求​

get请求参数​

post请求​

post请求参数​

Axios的响应结果​

Axios的全局配置​

Axios 接收图片​

Axios拦截器​

拦截器添加 Token​

Axios的并发请求​

Axios的使用案例​

Axios结合vue使用​

绑定 VueCli​